{% extends "_layout.html" %}

{# 样式代码 #}
{% block style %}
    <link href="{{ ctx.app.config.staticUrl }}/css/index.css" rel="stylesheet" >
    <link href="{{ ctx.app.config.staticUrl }}/css/ProgressBarWars.css" rel="stylesheet" >
{% endblock %}

{# body代码#}
{% block body %}
    <!--container start-->
	<div class="container" id="personal">
		<div class="personal_con">
			<!--用户头像-->
			<div class="personal_head">
				<div class="head_img">
					<img src="{{ ctx.app.config.staticUrl }}/images/head01.png"/>
					<div class="edit trs">
						<a href="#">
							<img src="img/Edit.png"/>
						</a>
					</div>
				</div>
				<div class="sex" style="background: #848266 url(img/img_bg.png) no-repeat;background-position: 4px -157px;">
					
				</div>						
			</div>
			<!--用户信息-->
			<div class="personal_info">
				<div class="personal_name">蜡笔小新</div>
				<article class="zzsc-container">
					<div class="zzsc-content">	  
						<div class="progress" id="example2"></div>	  
					</div>
				</article>
				<div class="integral">600/1000</div>
				<div class="earn_point">
					<a href="faq.html">如何获取积分</a>
				</div>
			</div>
			<!--用户信息列表-->
			<ul class="user_info_list">
				<!--个人资料-->
				<li class="info_item">
					<div class="drop_down_info">
						个人资料
						<div class="dot-bottom trs">
							<img src="img/arrow.png"/>
						</div>
					</div>
					<ul class="drop_down_info_list data">
						<li>
							<div class="info_left fl">生&nbsp;&nbsp;日</div>
							<div class="info_right fl">
								<div class="birthday fl">12/08</div>
								<div class="birthday_img fl">
									<img src="{{ ctx.app.config.staticUrl }}/images/birthday.png"/>
								</div>
							</div>
						</li>
						<li>
							<div class="info_left fl">电&nbsp;&nbsp;话</div>
							<div class="info_right fl">
								<div class="phone_number">18381273163</div>
							</div>
						</li>
						<li>
							<div class="info_left fl">邮&nbsp;&nbsp;箱</div>
							<div class="info_right fl">
								<div class="email_address">123@qq.com</div>
							</div>
						</li>
						<li>
							<div class="info_left fl" style="padding-top: 8px;">常用地址 1</div>
							<div class="info_right fl">
								<div class="info_address fl">
									<select name="address" class="addressCity">
										<option value="1">上海市</option>
									</select>
									<div class="arrow-bottom"></div>
								</div>
								<div class="info_address fl">
									<select name="address" class="addressArea">
										<option value="1">徐汇区</option>
										<option value="2">静安区</option>
										<option value="3">黄浦区</option>
										<option value="4">长宁区</option>
									</select>
									<div class="arrow-bottom"></div>
								</div>
								<input type="text" class="address" name="AddressFirst" id="AddressFirst" value="长乐路188号" />
								<input type="button" class="save trs" value="保存"/>
							</div>
						</li>
						<li>
							<div class="info_left fl" style="padding-top: 8px;">常用地址 2</div>
							<div class="info_right fl">
								<div class="info_address fl">
									<select name="address" class="addressCity">
										<option value="1">上海市</option>
									</select>
									<div class="arrow-bottom"></div>
								</div>
								<div class="info_address fl">
									<select name="address" class="addressArea">
										<option value="1">徐汇区</option>
										<option value="2">静安区</option>
										<option value="3">黄浦区</option>
										<option value="4">长宁区</option>
									</select>
									<div class="arrow-bottom"></div>
								</div>
								<input type="text" class="address" name="AddressFirst" id="AddressFirst" value="长乐路188号" />
								<input type="button" class="save trs" value="保存"/>
							</div>
						</li>
					</ul>
				</li>
				<!--修改密码-->
				<li class="info_item">
					<div class="drop_down_info">
						修改密码
						<div class="dot-bottom trs"><img src="img/arrow.png"/></div>
					</div>
					<ul class="drop_down_info_list change">
						<li>
							<input type="password" id="original_password" placeholder="请输入原密码" />
						</li>
						<li>
							<input type="password" placeholder="请输入新密码" />
						</li>
						<li>
							<input type="password" id="new_password" placeholder="请再次输入新密码" />
						</li>
						<li>
							<input type="button" class="save trs" value="保存"/>
						</li>
					</ul>
				</li>
				<!--消息提醒-->
				<li class="info_item">
					<div class="drop_down_info">
						我的优惠
						<div class="dot-bottom trs"><img src="img/arrow.png"/></div>
					</div>
					<div class="drop_down_info_list push_set">
						<div class="coupons unused">
							<a href="index.html"><img src="{{ ctx.app.config.staticUrl }}/images/01.png"/></a>
						</div>
						<div class="coupons used">
							<img src="{{ ctx.app.config.staticUrl }}/images/02.png"/>
						</div>
						<div class="coupons stale">
							<img src="{{ ctx.app.config.staticUrl }}/images/03.png"/>
						</div>
					</div>
				</li>
				<!--我的订单-->
				<li class="info_item">
					<div class="drop_down_info">
						我的订单
						<div class="dot-bottom trs"><img src="img/arrow.png"/></div>
					</div>
					<div class="line"></div>
					<ul class="drop_down_info_list myOrder">
						<li>
							<div class="info_img info_icon">
								<a href="paymentList.html">
									
								</a>
								<div class="info_number">2</div>
							</div>
							<span>待付款</span>
						</li>
						<li>
							<div class="info_img info_icon">
								<a href="paymentList.html">
									
								</a>		
							</div>
							<span>待发货</span>
						</li>
						<li>
							<div class="info_img info_icon">
								<a href="paymentList.html">
									
								</a>		
							</div>
							<span>待收货</span>
						</li>
						<li>
							<div class="info_img info_icon">
								<a href="paymentList.html">
									
								</a>		
							</div>
							<span>待评价</span>
						</li>
						<li>
							<div class="info_img info_icon">
								<a href="service.html">
									
								</a>		
							</div>
							<span>售后服务</span>
						</li>
					</ul>
				</li>
				<!--喜爱餐品-->
				<li class="info_item">
					<div class="drop_down_info">
						喜爱餐品
						<div class="dot-bottom trs"><img src="img/arrow.png"/></div>
					</div>
					<ul class="drop_down_info_list love">
						<li>
							<div class="info_left fl">喜爱餐品1</div>
							<div class="info_right fl">餐品信息餐品信息餐品信息餐品信息餐品信息餐品信息</div>
							<div class="look_more">
								<a href="dishesDetails.html">...查看更多</a>
							</div>
						</li>
						<li>
							<div class="info_left fl">喜爱餐品2</div>
							<div class="info_right fl">餐品信息餐品信息餐品信息餐品信息餐品信息餐品信息</div>
							<div class="look_more">
								<a href="dishesDetails.html">...查看更多</a>
							</div>
						</li>
						<li>
							<div class="info_left fl">喜爱餐品3</div>
							<div class="info_right fl">餐品信息餐品信息餐品信息餐品信息餐品信息餐品信息</div>
							<div class="look_more">
								<a href="dishesDetails.html">...查看更多</a>
							</div>
						</li>
						<li>
							<div class="info_left fl">喜爱餐品4</div>
							<div class="info_right fl">餐品信息餐品信息餐品信息餐品信息餐品信息餐品信息</div>
							<div class="look_more">
								<a href="dishesDetails.html">...查看更多</a>
							</div>
						</li>
						<li>
							<div class="info_left fl">喜爱餐品5</div>
							<div class="info_right fl">餐品信息餐品信息餐品信息餐品信息餐品信息餐品信息</div>
							<div class="look_more">
								<a href="dishesDetails.html">...查看更多</a>
							</div>
						</li>
					</ul>
				</li>
				<!--消费记录-->
				<li class="info_item">
					<div class="drop_down_info">
						消费记录
						<div class="dot-bottom trs"><img src="img/arrow.png"/></div>
					</div>
					<ul class="drop_down_info_list record">
						<li>
							<div class="record_left fl">
								龙虾鲍鱼饭
								<br>
								2017/5/20
							</div>
							<div class="record_right fr">
								<div class="sum_price">￥99.90</div>
							</div>
						</li>
						<li>
							<div class="record_left fl">
								黑胡椒猪排
								<br>
								2017/5/20
							</div>
							<div class="record_right fr">
								<div class="sum_price">￥99.90</div>
							</div>
						</li>
					</ul>
				</li>
				<!--预定提醒-->
				<li class="info_item">
					<div class="drop_down_info">
						预定提醒
					</div>
					<div class="remind">
						<div class="remind_left fl">
							龙虾鲍鱼饭
							<br>
							2017/5/20
						</div>
						<div class="remind_right fr">
							<div class="remind_count">3天</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<!--container end-->
{% endblock %}
{#js代码#}
{% block js %}
    <script type="text/javascript" src="{{ ctx.app.config.staticUrl }}/js/index.js"></script>
	<script src="{{ ctx.app.config.staticUrl }}/js/ProgressBarWars.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$("#example2").ProgressBarWars({porcentaje:60,color:"#c3a370"});
	</script>
	<script>
		var getStr = function(){
				try{
	            var url = window.location.href;
	            var result = url.split("?")[1];
	            var keyValue = result.split("&");
	            var obj = {};
	            for (var i = 0; i < keyValue.length; i++) {
	                var item = keyValue[i].split("=");
	                obj[item[0]] = item[1];
	            }
	            return obj;}catch(e){
	                console.warn("这里是没有值!");
	            }
			};
			/**
	         * 页面加载完毕打印键值对对象
	         */
	        window.onload = function () {
	            var str = getStr().sty;
	            if(str == 1){
	            	$('.love').css('display','block');
	            }
	            if(str == 2){
	            	$('.record').css('display','block');
	            }
	            if(str == 3){
	            	$('.data').css('display','block');
	            }
	            if(str == 4){
	            	$('.push_set').css('display','block');
	            }
	        }
	</script>
{% endblock %}
